<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <PageLayout>
      <div class="table-container height-100">
        <EZTable v-loading="tableLoading" :table-id="tableId" :table-hdl="tableHdl" :rows="operationLogData"
                 :custom-empty="true" @pageChanged="getOperationLogData" @sizeChanged="getOperationLogData"
                 @filterChange="getOperationLogData">
        </EZTable>
      </div>
    </PageLayout>
    <el-dialog :visible.sync="showDetailDialog" :close-on-click-modal="false"  :append-to-body="true" :title="title" width="900px" top="100px"
               @close="reFresh===false">
      <div v-if="!isCodediff">
        <CodeEditor v-if="reFresh" v-model="editFunction" class="mar-top"></CodeEditor>
      </div>
      <div v-else>
        <CodeDiff class="center" :old-string="oldStrToCompare" :new-string="newStrToCompare" :context="10"
                  outputFormat="side-by-side"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {optLogTypeCfg} from "@/config/common";
  import {tableIdConfig, tableOptBtnConfig} from '@/config/table';
  import {deepCopyWithJson} from "@/utils";
  import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
  import operationLogTableCfg from "../../config/table/operationLog";
  import EZTable from '../../components/table/EZTable';
  // import {logTypeArray, operationTypeArray} from "../../../app/both/config";
  import CodeDiff from 'vue-code-diff'
  import CodeEditor from '@/components/IDE/CodeEditor';

  export default {
    name: "OperationLog",
    props: {
      relationId: String,
      dialogTitle: String
    },
    components: {
      EZTable, CodeDiff, CodeEditor
    },
    data() {
      return {
        tableLoading: true,
        tableId: tableIdConfig.operationLog,
        tableHdl: null,
        operationLogData: [],
        operationLogForm: {},
        jsonStyle: {
          string: 'color: #3ab54a; font-weight: bold;',
          number: 'color: #25aae2; font-weight: bold;',
          boolean: 'color: #f98280; font-weight: bold;',
          null: 'color: magenta; font-weight: bold;',
          key: 'color: #92278f;font-weight: bold;'
        },
        showDetailDialog: false,
        editScriptType: 'javascript',
        editFunction: '',
        preHtml: '',
        title: '详情',
        isCodediff: false,
        oldStrToCompare: '',
        newStrToCompare: '',
        reFresh: true

      }
    },
    watch: {
      relationId() {
        this.getOperationLogData();
      }
    },
    activated() {
      this.initTableConfig();
      this.getOperationLogData();
    },

    methods: {
      reFreshChild() {
        this.reFresh = false
        this.$nextTick(() => {
          this.reFresh = true
        })
      },
      initTableConfig() {
        if (this.tableHdl) return;
        const {columns = [], filters = []} = getTableConfig(this.tableId, operationLogTableCfg);
        assembleTableOptBtn(columns, ({type = '', data = {}}) => {
          if (!type) return;
          const row = deepCopyWithJson(data);
          switch (type) {
            case tableOptBtnConfig.detail.type:
              this.showDetailDialog = true
              this.showDetail(row)
              this.reFreshChild()
              break;
            default:
              break;
          }
        });

        this.tableHdl = new TableStateHdl(this.$route.name, this.tableId, columns, filters);
      },
      getOperationLogData() {
        this.tableLoading = true;
        const selector = {};
        const tableParam = this.tableHdl.assembleTableParam();
        API.operationLog.operationLogList({selector, ...tableParam}).then(result => {
          this.tableLoading = false;
          const {data = [], total = 0} = result;
          this.operationLogData = data
          this.tableHdl.total = total;
        }).catch(err => {
          console.log('err', err)
          this.tableLoading = false;
        });
      },
      showDetail(item) {
        const {operationLogType, updateFields} = item;
        let json, jsonAfter, jsonBefore;
        switch (operationLogType) {
          case optLogTypeCfg.insert:
            this.title = '新增信息详情';
            this.isCodediff = false
            json = updateFields.split("新增信息详情：")[1];
            this.editFunction = JSON.stringify(JSON.parse(json), null, 4) || ''

            break;
          case optLogTypeCfg.update:
            this.title = '修改信息详情';
            this.isCodediff = true
            json = updateFields.split("修改信息详情：")[1];
            jsonBefore = json.split("修改后：")[0].split("修改前：")[1];
            jsonAfter = json.split("修改后：")[1];
            json = `修改前：\n ${jsonBefore} \n修改后：${jsonAfter}`;
            this.oldStrToCompare = JSON.stringify(JSON.parse(jsonBefore), null, 4) || ''
            this.newStrToCompare = JSON.stringify(JSON.parse(jsonAfter), null, 4) || ''
            break;
          case optLogTypeCfg.remove:
            this.title = '删除信息详情';
            this.isCodediff = false
            json = updateFields.split("删除信息详情：")[1];
            this.editFunction = JSON.stringify(JSON.parse(json), null, 4) || ''
            break;
          case optLogTypeCfg.relationUpdate:
            this.title = '关联修改详情';
            this.isCodediff = false
            json = updateFields.split("关联修改详情：")[1];
            this.editFunction = json
            break;
          default:
            break;
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  .column-info {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }

  pre {
    padding: 5px;
    margin: 5px;
  }

  .string {
    color: #3ab54a;
    font-weight: bold;
  }

  .number {
    color: #25aae2;
    font-weight: bold;
  }

  .boolean {
    color: #f98280;
    font-weight: bold;
  }

  .null {
    color: magenta;
    font-weight: bold;
  }

  .key {
    color: #92278f;
    font-weight: bold;
  }
</style>
